<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in [commodityInfo.image]" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<text class="title">{{ commodityInfo.name }}</text>
			<view class="price-box">
				<text class="price">{{ commodityInfo.memberPrice }}</text>
				<text class="m-price">¥{{ commodityInfo.originalPrice }}</text>
				<text class="coupon-tip">会员价</text>
			</view>
			<view class="bot-row justify-between">
				<view>销量: {{commodityInfo.salesVolume}}</view>
				<template v-if="skuList.length !== 0">
					<view class="sku-box-btn" @click="toggleSpec()">选规格</view>
				</template>
				<template v-else>
					<view class="sku-box-btn" @click="detailsAddCart()">加入购物车</view>
				</template>
			</view>
		</view>


		<!-- 评价 -->
		<template v-if="commodityEvaluateList.length !== 0">
			<view v-for="(item,index) in commodityEvaluateList" :key="index">
				<view class="eva-section">
					<view class="e-header" v-if="index == 0">
						<text class="tit">评价</text>
						<text>({{ commodityEvaluateList.length }})</text>
						<text class="tip">评分： {{allRating}}</text>
						<!-- <text class="yticon icon-you"></text> -->
					</view>
					<view class="eva-box">
						<u-avatar v-if="item.image"
							:src="item.isAnonymous == 0 ? $ut.setImgae(item.image) : ''"></u-avatar>
						<view class="right">
							<text class="name">{{ item.isAnonymous == 0 ? item.userInfo.name : '匿名用户' }}</text>
							<text class="con">{{ item.content }}</text>
							<image v-if="item.image" class="portrait" :src="$ut.setImgae(item.image)" mode="aspectFill"
								@click="$ut.previewImage(item.image)"></image>
							<view class="bot">
								<text class="attr">规格：小份</text>
								<text class="time">{{ item.createTime }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<rich-text :nodes="desc"></rich-text>
		</view>

		<!-- 规格弹窗 -->
		<u-popup v-model="skuBoxShow" safe-area-inset-bottom mode="bottom" border-radius="20" closeable>
			<view class="sku-box mb-30">
				<view class="my-24 px-30 font-32 font-bold mb-50">{{ skuGoodsName }}</view>
				<view class="px-30" v-for="(skuType, typeKey) in skuList" :key="typeKey">
					<view class="font-bold mb-24">{{ skuType.name }}</view>
					<block v-for="(sku, key) in skuType.shopCommoditySpecsList">
						<view class="tag-box" :class="{'is-current' : skuIdList.some(item => item.skuId == sku.id)}"
							@tap="changeSkuId(sku, typeKey, key)">
							<text class="tag-name py-8">{{sku.name}}</text>
							<text class="mx-12" v-if="sku.originalPrice"> | </text>
							<text class="tag-price py-8" v-if="sku.originalPrice">{{sku.originalPrice}}</text>
						</view>
					</block>
				</view>
				<view class="mt-20 font-24 px-30 py-20 mb-40 chooice-box">
					<text style="color: #999;">已选规格:</text>
					<text class="ml-4 font-bold">{{ getCurrentSkuName }}</text>
				</view>
				<view class="px-30 flex justify-between items-center">
					<view>总计：
						<text class="price font-38">{{ isVip ? currentSkuMemberPrice : currentSkuPrice }}</text>
						<text class="font-24 ml-12" v-if="isVip" :class="{ 'sku-price' : isVip }">{{ currentSkuPrice }}</text>
					</view>
					<view class="add-cart-btn">
						<u-button type="warning" size="mini" class="no-border confirm-btn" @click.stop="addCartClick">+
							加入购物车</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 购物车弹窗 -->
		<u-popup v-model="carShow" safe-area-inset-bottom mode="bottom" border-radius="20">
			<view class="my-30 flex justify-end mr-30 font-24" @tap="clearCartClick()">
				<u-icon name="trash"></u-icon>
				<text class="ml-12">清空购物车</text>
			</view>
			<view class="line mx-30"></view>
			<scroll-view scroll-y class="scroll-Y">
				<view v-for="(item, index) in $store.state.carList" :key="index" class="s-list">
					<view class="t-list">
						<view class="guess-item">
							<view class="image-wrappers">
								<image :src="$ut.setImgae(item.image)" mode="aspectFill"></image>
							</view>
							<view class="content-box">
								<view class="title line-1 font-bold">{{item.name}}</view>
								<view class="font-24 mt-6">{{item.commoditySpecs}}</view>
								<view class="font-24 flex items-center justify-between">
									<view class="flex items-end font-32">
										<u-parse style="color: #FF0909;"
											:html="decimalPoint(isVip ? item.memberPrice : item.originalPrice)"></u-parse>
										<view class="font-24 pb-2 ml-12" v-if="isVip" style="text-decoration: line-through;">
											￥{{ item.originalPrice }}</view>
									</view>
									<u-number-box v-model="item.number" :min="0" size="24" :index="index" input-width="50" disabled-input
										@change="listcartChange"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="width: 100%;height: 180rpx;" />
		</u-popup>

		<!-- 底部菜单栏 -->
		<view class="action-section" @click="carShow = !carShow">
			<view class="total-box">
				<text class="price">{{ allPrice }}</text>
				<text class="coupon" v-if="isVip">
					已优惠
					<text>{{preferentialPirce}}</text>
					元
				</text>
			</view>
			<template v-if="shopInfo.startPrice != null && shopInfo.startPrice <= allPrice">
				<button type="primary" class="no-border confirm-btn" @click.stop="createOrder">去结算</button>
			</template>
			<template v-else>
				<u-button type="primary" disabled class="no-border" shape="circle">
					<text class="font-bold">未满起送: {{ shopInfo.startPrice }}</text>
				</u-button>
			</template>
		</view>
		
		<u-modal v-model="loginShow" title="温馨提示" content="检测到您未登录,请前去登录" show-cancel-button
			@confirm="$ut.route('/pages/public/login')"></u-modal>

		<!-- 分享 -->
		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
	</view>
</template>

<script>
	const prePage = ()=>{
		let pages = getCurrentPages();
		let prePage = pages[pages.length - 2];
		// #ifdef H5
		return prePage;
		// #endif
		return prePage.$vm;
	}
	import {
		mapState
	} from 'vuex';
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				commodityEvaluateList: [], // 商品评论
				commodityInfo: {}, // 商品信息
				shopInfo: {}, // 店铺信息
				specClass: 'none',
				specSelected: [],
				commodityId: '', //商品ID
				favorite: true,
				shareList: [],
				isVip: true, // 是否为会员
				desc: '',
				skuInfo: {
					id: undefined,
					name: ''
				},
				skuBoxShow: false,
				loginShow: false,
				carShow: false, // 购物车弹窗
				specChildList: [],
				skuList: [],
				skuGoodsName: '', // 选中的商品的名字
				skuIdList: [], // 选中的sku
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			allRating() {
				let allRatings = 0;
				this.commodityEvaluateList.forEach(item => {
					allRatings += item.allRating;
				})
				allRatings = allRatings / this.commodityEvaluateList.length;
				return allRatings.toFixed(1);
			},
			// 总价
			allPrice() {
				let price = 0;
				this.$store.state.carList.forEach(item => {
					if (this.isVip) {
						price += Number(item.memberPrice) * Number(item.number)
					} else {
						// isInSave 如果参与了打折，那么这个地方的系数就要改变了(后台已经处理好了)
						// 规格中已经处理了，直接加上原价即可
						price += Number(item.originalPrice) * Number(item.number)
					}

				})
				price = Number(price.toFixed(2));
				return price
			},
			// 总优惠价
			preferentialPirce() {
				let price = 0;
				this.$store.state.carList.forEach(item => {
					price += (Number(item.originalPrice) - Number(item.memberPrice)) * Number(item.number);
				})
				price = Number(price.toFixed(2));
				return price
			},
			// 计算当前选中的sku的名字
			getCurrentSkuName() {
				let allName = '';
				this.skuIdList.forEach((item, key) => {
					allName += `${item.skuName}${this.skuIdList.length == key + 1 ? '' : '、'}`;
				})
				return allName;
			},
			// 计算当前选中的sku的价格
			currentSkuPrice() {
				let price = 0;
				this.skuIdList.forEach((item, key) => {
					price += item.originalPrice
				})
				return price
			},
			// 计算当前选中的sku是会员的价格
			currentSkuMemberPrice() {
				let price = 0;
				this.skuIdList.forEach((item, key) => {
					price += item.memberPrice
				})
				return price
			}
		},
		async onLoad(options) {
			//接收传值,id里面放的是标题，因为测试数据并没写id 
			const id = options.id;
			let type = options.type;
			this.shopInfo = JSON.parse(decodeURIComponent(options.shopInfo));
			this.commodityId = id;
			this.isVip = options.isVip;
			if (type == 2) {
				this.getShopCommodityData();
				this.getShopCommodityEvaluateUserData();
			}
			if (type == 1) {
				this.getIntegralCommodityData();
				this.commodityEvaluateList = [];
			}

		},
		methods: {
			// 购物车结算
			async createOrder() {
				if (!this.hasLogin) return this.loginShow = true;
				if (this.$store.state.carList.length == 0) return this.$u.toast('请选择至少一个商品');
				await this.$store.state.carList.forEach(item => {
					if (item.shopCommoditySpecsTypeList.length == 0) {
						item.carShopCommoditySpecsIdList = this.setCarShopCommoditySpecsIdList(item
							.shopCommoditySpecsTypeList);
					}
				})
				const data = {
					carOrderTakeawayCommodityDtoList: this.$store.state.carList,
					carShopId: this.shopInfo.id
				}
				this.$u.api.countCarOrderIntegral(data).then(res => {
					this.$ut.route('/pages/order/createOrder', {
						carList: encodeURIComponent(JSON.stringify(this.$store.state.carList)),
						shopInfo: encodeURIComponent(JSON.stringify(this.shopInfo)),
						isVip: this.isVip,
						shopInfoName: this.shopInfo.name
					});
				})
			},
			// 规格弹窗中加入购物车
			addCartClick() {
				// 深拷贝对象，直接取第一个即可，因为只要有规格，第一个就一定会有数据，并且第一个就是该规格所指向的商品相关信息
				let skuIdList = JSON.parse(JSON.stringify(this.skuIdList))
				// 添加规格集合和商品id
				let skubyCartObj = Object.assign({
					carShopCommoditySpecsIdList: [],
					commoditySpecs: this.getCurrentSkuName,
					commodityId: skuIdList[0].goodsInfo.id
				}, skuIdList[0].goodsInfo);
				// 将商品
				// 有规格的商品，需要先将规格的价格置0
				skubyCartObj.originalPrice = 0;
				skubyCartObj.memberPrice = 0;
				skuIdList.forEach(item => {
					// 添加规格的时候就已经计算了是否是会员价，此处无需再次判断
					skubyCartObj.originalPrice += Number(item.originalPrice);
					skubyCartObj.memberPrice += Number(item.memberPrice);
					// 规格的集合
					skubyCartObj.carShopCommoditySpecsIdList.push(item.skuId);
				})
				// 如果购物车数组为0，则没有其他商品
				if (this.$store.state.carList.length == 0) {
					this.$store.state.carList.push({
						...skubyCartObj,
						number: 1
					});
				} else {
					// 如果不为0则购物车本身就有商品了
					// 先尝试去找有无索引，找到索引，则购物车中已存在该商品，否则没有
					const index = this.checkIsSameSkuGoods(skubyCartObj, this.$store.state.carList)
					if (index == -1) {
						// 不存在直接push到最后
						this.$store.state.carList.push({
							...skubyCartObj,
							number: 1
						});
					} else {
						// 存在直接+1
						this.$store.state.carList[index].number += 1;
					}
				}
				this.skuBoxShow = false;
				this.$forceUpdate();
			},
			// 判断是不是同一个商品下同一个规格
			checkIsSameSkuGoods(skuObj, carList) {
				const skuCarShopCommoditySpecsIdString = skuObj.carShopCommoditySpecsIdList.join(',');
				let index = -1;
				try {
					carList.forEach((item, key) => {
						// 需要判断规格是否存在
						if (item.hasOwnProperty('carShopCommoditySpecsIdList')) {
							if (skuCarShopCommoditySpecsIdString == item.carShopCommoditySpecsIdList.join(',')) index = key;
						} else {
							if (skuCarShopCommoditySpecsIdString == item.commodityTypeId) index = key;
						}
					})
				} catch (err) {
					console.log(err, '此处可能存在逻辑错误，抛出错误防止控制台暴红并更好定位错误');
				}
				return index;
			},
			//获取会员商品
			getIntegralCommodityData() {
				this.$u.api.getIntegralCommodity({
					id: this.commodityId
				}).then(res => {
					if (res.dataList.length === 0) return false;
					this.commodityInfo = res.dataList[0];
					if (this.commodityInfo.shopCommoditySpecsList.length > 0) {
						this.skuList = this.commodityInfo.shopCommoditySpecsList;
					}
				})
			},
			// 清空购物车
			clearCartClick() {
				this.$store.state.carList = [];
				this.carShow = false;
			},
			// 获取商品评价
			async getShopCommodityEvaluateUserData() {
				const data = await this.$u.api.getShopCommodityEvaluateUser({
					commodityId: this.commodityId
				})
				this.commodityEvaluateList = data.dataList;
			},
			// 获取商品数据
			getShopCommodityData() {
				this.$u.api.getShopCommodityUser({
					id: this.commodityId
				}).then(res => {
					if (res.dataList.length === 0) return false;
					this.commodityInfo = res.dataList[0];
					if (this.commodityInfo.shopCommoditySpecsTypeList != null) {
						this.setSkuBox(this.commodityInfo);
					}
				})
			},
			setSkuBox(info) {
				const {
					id,
					name,
					shopCommoditySpecsTypeList,
					isInSave // 是否储蓄
				} = info;
				// 赋值当前商品名到popup弹窗
				this.skuGoodsName = name;
				// 数据深拷贝
				this.skuList = JSON.parse(JSON.stringify(shopCommoditySpecsTypeList));
				// 取每个类型第一个到选中的sku id数组中
				this.skuList.forEach((item, typeKey) => {
					// 先确定有相应规格
					if (item.shopCommoditySpecsList.length > 0 && item.shopCommoditySpecsList.length != null) {
						// 默认一定取的第一个,赋值一个规格对象
						const shopCommoditySpecsObj = item.shopCommoditySpecsList[0];
						this.skuIdList.push({
							// 记录标记位防止重复记录id
							commodityId: id, // 商品id
							goodsName: name, // 商品名称
							skuName: shopCommoditySpecsObj.name, // 规格名称
							memberPrice: shopCommoditySpecsObj.memberPrice, // 规格会员价
							originalPrice: shopCommoditySpecsObj.originalPrice, // 规格原价
							typeKey, // 规格类型索引
							skuKey: 0, // 规格索引,第一次赋值一定是第一个
							skuId: shopCommoditySpecsObj.id, // 规格id
							isInSave, // 是否参与储蓄
							goodsInfo: info // 当前规格信息
						});
					}
				})
			},
			// 数据格式处理,由于uni-vue2模式不支持jsx语法，此处用v-html解决样式问题
			decimalPoint(val) {
				const splitPrice = (val.toString() || '0.00').split('.')
				const numb1 = splitPrice[0]
				let numb2 = '00'
				if (splitPrice.length > 1) {
					numb2 = splitPrice[1]
				}
				return `<view style="font-size: 12px;font-weight: bold">￥</view>${numb1}.<view style="font-size: 12px;">${numb2}</view>`
			},
			// 购物车的
			listcartChange(e) {
				console.log(e);
				const num = e.value;
				const index = e.index;
				const id = this.$store.state.carList[index].id;
				if (num == 0) {
					// 在删除购物车数组前有限改变商品列表数组数据
					// this.slist.forEach((item, index) => {
					// 	if (item.id == id) item.number = 0;
					// })
					// 为0时删除购物车内容
					this.$store.state.carList.splice(index, 1);
					// 需要关闭购物车之后再打开，否则数量显示会出现bug，估计需要换一个步进器
					this.carShow = false;
				} else {
					// 不为0时同步数据
					// this.slist.forEach((item, index) => {
					// 	if (item.id == id) item.number = num;
					// })
				}
				// 修改上一个页面的页面栈数据
				prePage().detailsSetShopList(id, false, num);
				this.$forceUpdate();
			},
			// 没有规格的时候加入购物车
			detailsAddCart() {
				let key = undefined;
				if (this.commodityInfo.hasOwnProperty('number')) {
					this.$store.state.carList.forEach((item, index) => {
						if (item.id == this.commodityInfo.id) item.number += 1;
					})
				} else {
					// 没有的时候+1
					if (this.$store.state.carList.length !== 0) {
						this.$store.state.carList.forEach((item, index) => {
							if (item.id == this.commodityInfo.id) return key = index;
						})
						if (key != undefined) {
							this.$store.state.carList[key].number += 1;
						} else {
							this.$store.state.carList.push({
								...this.commodityInfo,
								number: 1
							})
						}
					} else {
						this.$store.state.carList.push({
							...this.commodityInfo,
							number: 1
						})
					}
				}
				// 调用页面栈去修改上个列表的信息
				prePage().detailsSetShopList(id, true);
			},
			//规格弹窗开关
			toggleSpec() {
				this.skuBoxShow = true;
			},
			//选择规格
			selectSpec(name, id) {
				this.skuInfo.id = id;
				this.skuInfo.name = name;
			},
			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			//收藏
			toFavorite() {
				this.favorite = !this.favorite;
			},
			buy() {
				uni.navigateTo({
					url: `/pages/order/createOrder`
				})
			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss' scoped>
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.sku-box {
		width: 100%;
		padding-bottom: 300rpx;

		.tag-box {
			padding: 8rpx 18rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			font-size: 18rpx;
			border: 1rpx solid #fcbd71;
			display: inline-block;
			border-radius: 12rpx;
			position: relative;

			.tag-name {}

			.tag-price {
				&::before {
					content: '￥';
				}
			}
		}

		.is-current {
			color: #f90;
			background-color: #fdf6ec;
		}

		.chooice-box {
			background-color: rgb(250, 250, 250);
		}

		.sku-price {
			text-decoration: line-through;
		}

		.add-cart-btn {}
	}


	.scroll-Y {
		height: 500rpx;

		.list-box {
			border-radius: 20rpx;
			box-shadow: 0 0 10upx 0 rgba(0, 0, 0, .2);
		}

		.store-icon {
			background-color: #f6f4f4;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}

	.content-box {
		margin-left: 24rpx;
		flex: 1;

		.title {
			font-size: 28rpx;
			color: $font-color-dark;
		}

		.evaluation-box {
			display: flex;
			align-items: flex-end;


			.score {
				color: #e29c51;
				font-size: 28rpx;
				font-weight: bold;

				&::after {
					content: '分';
					font-size: 24rpx;
				}
			}

			.sales {
				font-size: 24rpx;
				color: #999;
			}
		}

		.delivery {
			font-size: 24rpx;
			color: #999;
		}

		.sku-box-btn {
			background-color: #2979ff;
			padding: 2rpx 12rpx;
			font-size: 24rpx;
			transform: scale(.9) translateY(4rpx);
			color: #fff;
			border-radius: 8rpx;
		}
	}

	.sku-box-btn {
		background-color: $uni-color-warning;
		padding: 2rpx 12rpx;
		font-size: 24rpx;
		transform: scale(.9) translateY(4rpx);
		color: #fff;
		border-radius: 8rpx;
	}

	.action-section {
		/* #ifdef H5 */
		margin-bottom: 10upx;
		/* #endif */
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 10086;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.clear-btn {
			position: absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 0 50px 50px 0;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: left;
			padding-right: 40upx;

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $font-color-dark;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px rgba($color: $uni-color-primary, $alpha: .72);
		}
	}

	.guess-item {
		display: flex;
		width: 100%;
		padding: 24rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 16rpx;

		&:nth-child(2n+1) {
			// margin-right: 4%;
		}
	}

	.image-wrappers {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		border: 1rpx dashed #eaeaea;

		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}

	.isShopClose {
		justify-content: center;
		background: rgba(0, 0, 0, .5);
		color: #fff
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 160upx;
			height: 160upx;
			margin-bottom: 16rpx;
			border-radius: 8rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $font-color-price;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #d8dafb;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #2979ff;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			/* &:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			} */
			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 360upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	::v-deep {
		.u-collapse-head {
			font-size: 24rpx;
		}

		.u-collapse-content {
			font-size: 24rpx;
		}

		.u-tab-item {
			color: #333 !important;
		}

		.u-icon-minus {
			background-color: transparent !important;
			border: 1rpx solid #e29c51 !important;
			border-radius: 50% !important;
			width: 36rpx !important;
			height: 36rpx !important;
			line-height: 36rpx !important;
			padding-top: 4rpx !important;
		}

		.u-number-input {
			background-color: transparent !important;
		}

		.u-icon-plus {
			background-color: #e29c51 !important;
			border: 1rpx solid #e29c51 !important;
			border-radius: 50% !important;
			width: 36rpx !important;
			height: 36rpx !important;
			line-height: 36rpx !important;
			padding-top: 4rpx !important;
		}

		.u-size-mini {
			padding: 6rpx 4rpx;
		}
	}
</style>